<template>
  <div class="status-management-guide">
    <a-modal
      :open="visible"
      title="状态管理使用指南"
      width="800px"
      @cancel="handleClose"
      :footer="null"
    >
      <div class="guide-content">
        <!-- 快速导航 -->
        <div class="guide-nav">
          <a-anchor :affix="false" :bounds="5" :offset-top="10">
            <a-anchor-link href="#overview" title="概述" />
            <a-anchor-link href="#status-types" title="状态类型" />
            <a-anchor-link href="#status-config" title="状态配置" />
            <a-anchor-link href="#status-history" title="状态历史" />
            <a-anchor-link href="#status-subscription" title="状态订阅" />
            <a-anchor-link href="#state-machine" title="状态机" />
            <a-anchor-link href="#status-events" title="状态事件" />
            <a-anchor-link href="#best-practices" title="最佳实践" />
          </a-anchor>
        </div>

        <!-- 指南内容 -->
        <div class="guide-sections">
          <!-- 概述 -->
          <section id="overview" class="guide-section">
            <h3>📋 状态管理概述</h3>
            <p>资源状态管理系统支持四重状态管理，确保资源的全生命周期可控：</p>
            <a-row :gutter="16" style="margin-top: 16px">
              <a-col :span="6">
                <a-card size="small" class="status-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:clock-circle-outlined" />
                    生命周期
                  </template>
                  <p>资源从创建到归档的完整生命周期状态</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="status-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:check-circle-outlined" />
                    可用性
                  </template>
                  <p>资源的可用性和使用状态</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="status-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:version-outlined" />
                    版本
                  </template>
                  <p>资源的版本发布和部署状态</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="status-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:setting-outlined" />
                    业务状态
                  </template>
                  <p>用户自定义的业务流程状态</p>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <!-- 状态类型 -->
          <section id="status-types" class="guide-section">
            <h3>🏷️ 状态类型详解</h3>

            <h4>生命周期状态</h4>
            <a-descriptions :column="2" bordered size="small">
              <a-descriptions-item label="草稿 (DRAFT)">
                <a-tag color="default">草稿</a-tag>
                资源初始创建状态
              </a-descriptions-item>
              <a-descriptions-item label="活跃 (ACTIVE)">
                <a-tag color="green">活跃</a-tag>
                资源正常使用状态
              </a-descriptions-item>
              <a-descriptions-item label="暂停 (SUSPENDED)">
                <a-tag color="orange">暂停</a-tag>
                资源临时停用状态
              </a-descriptions-item>
              <a-descriptions-item label="归档 (ARCHIVED)">
                <a-tag color="red">归档</a-tag>
                资源永久停用状态
              </a-descriptions-item>
            </a-descriptions>

            <h4 style="margin-top: 24px">可用性状态</h4>
            <a-descriptions :column="2" bordered size="small">
              <a-descriptions-item label="可用 (AVAILABLE)">
                <a-tag color="green">可用</a-tag>
                资源可以正常使用
              </a-descriptions-item>
              <a-descriptions-item label="已预订 (RESERVED)">
                <a-tag color="blue">已预订</a-tag>
                资源已被预订
              </a-descriptions-item>
              <a-descriptions-item label="使用中 (IN_USE)">
                <a-tag color="orange">使用中</a-tag>
                资源正在被使用
              </a-descriptions-item>
              <a-descriptions-item label="不可用 (UNAVAILABLE)">
                <a-tag color="red">不可用</a-tag>
                资源暂时不可用
              </a-descriptions-item>
            </a-descriptions>
          </section>

          <!-- 状态配置 -->
          <section id="status-config" class="guide-section">
            <h3>⚙️ 状态配置指南</h3>

            <h4>创建状态定义</h4>
            <a-steps direction="vertical" size="small">
              <a-step
                title="点击新建状态"
                description="在状态定义管理区域点击'新建状态'按钮"
              />
              <a-step
                title="填写状态信息"
                description="输入状态名称、代码、描述、颜色和图标"
              />
              <a-step
                title="设置状态类型"
                description="选择是否为初始状态或终态"
              />
              <a-step title="保存状态定义" description="点击确定保存状态定义" />
            </a-steps>

            <h4 style="margin-top: 24px">配置转换规则</h4>
            <a-steps direction="vertical" size="small">
              <a-step
                title="点击新建规则"
                description="在状态转换规则区域点击'新建规则'按钮"
              />
              <a-step
                title="选择起始状态"
                description="选择可以转换的起始状态（可多选）"
              />
              <a-step title="选择目标状态" description="选择转换后的目标状态" />
              <a-step
                title="设置转换条件"
                description="可选：设置转换的条件和动作"
              />
              <a-step title="保存转换规则" description="点击确定保存转换规则" />
            </a-steps>

            <div class="tip-box">
              <IconifyIcon icon="ant-design:bulb-outlined" />
              <strong>提示：</strong
              >状态转换规则决定了资源状态之间的转换路径，确保业务逻辑的正确性。
            </div>
          </section>

          <!-- 状态历史 -->
          <section id="status-history" class="guide-section">
            <h3>📊 状态历史管理</h3>

            <p>状态历史功能帮助您追踪资源状态的变更记录：</p>

            <a-list size="small">
              <a-list-item>
                <template #actions>
                  <a-tag color="blue">过滤</a-tag>
                </template>
                <a-list-item-meta
                  title="按状态类型过滤"
                  description="选择特定的状态类型查看相关历史记录"
                />
              </a-list-item>
              <a-list-item>
                <template #actions>
                  <a-tag color="green">时间</a-tag>
                </template>
                <a-list-item-meta
                  title="按时间范围过滤"
                  description="选择时间范围查看特定时期的状态变更"
                />
              </a-list-item>
              <a-list-item>
                <template #actions>
                  <a-tag color="orange">导出</a-tag>
                </template>
                <a-list-item-meta
                  title="导出历史记录"
                  description="将状态变更历史导出为文件"
                />
              </a-list-item>
            </a-list>
          </section>

          <!-- 状态订阅 -->
          <section id="status-subscription" class="guide-section">
            <h3>🔔 状态订阅管理</h3>

            <p>状态订阅功能允许您监听状态变更并接收通知：</p>

            <a-alert
              message="订阅类型"
              description="支持按指定资源或资源类型进行订阅"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="事件类型"
              description="可选择监听的状态变更事件类型"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="回调URL"
              description="状态变更时系统会向指定的URL发送通知"
              type="info"
              show-icon
            />
          </section>

          <!-- 状态机 -->
          <section id="state-machine" class="guide-section">
            <h3>🔄 状态机配置</h3>

            <p>状态机定义了资源状态之间的转换逻辑：</p>

            <a-timeline>
              <a-timeline-item color="green">
                <p><strong>定义状态</strong> - 创建资源的所有可能状态</p>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <p><strong>配置转换</strong> - 定义状态之间的转换规则</p>
              </a-timeline-item>
              <a-timeline-item color="orange">
                <p><strong>设置条件</strong> - 为转换添加条件和动作</p>
              </a-timeline-item>
              <a-timeline-item color="red">
                <p><strong>验证规则</strong> - 确保状态转换的合法性</p>
              </a-timeline-item>
            </a-timeline>
          </section>

          <!-- 状态事件 -->
          <section id="status-events" class="guide-section">
            <h3>📡 状态事件管理</h3>

            <p>状态事件系统记录和监控所有状态相关的操作：</p>

            <a-table
              :columns="eventColumns"
              :data-source="eventExamples"
              :pagination="false"
              size="small"
            />
          </section>

          <!-- 最佳实践 -->
          <section id="best-practices" class="guide-section">
            <h3>💡 最佳实践</h3>

            <a-collapse>
              <a-collapse-panel key="1" header="状态命名规范">
                <ul>
                  <li>使用清晰、描述性的状态名称</li>
                  <li>状态代码使用大写字母和下划线</li>
                  <li>避免使用过于复杂的状态名称</li>
                  <li>保持状态名称的一致性</li>
                </ul>
              </a-collapse-panel>

              <a-collapse-panel key="2" header="状态转换设计">
                <ul>
                  <li>确保状态转换的合理性</li>
                  <li>避免循环转换</li>
                  <li>为每个转换设置明确的条件</li>
                  <li>考虑异常情况的处理</li>
                </ul>
              </a-collapse-panel>

              <a-collapse-panel key="3" header="订阅管理">
                <ul>
                  <li>合理设置订阅范围，避免过多通知</li>
                  <li>定期检查和清理无效订阅</li>
                  <li>确保回调URL的可用性</li>
                  <li>监控订阅的执行情况</li>
                </ul>
              </a-collapse-panel>
            </a-collapse>
          </section>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  close: [];
}>();

// 事件示例数据
const eventExamples = ref([
  {
    type: 'STATUS_CHANGED',
    description: '状态变更事件',
    example: '资源从"草稿"变更为"活跃"',
  },
  {
    type: 'LIFECYCLE_CHANGED',
    description: '生命周期变更事件',
    example: '资源生命周期状态变更',
  },
  {
    type: 'AVAILABILITY_CHANGED',
    description: '可用性变更事件',
    example: '资源可用性状态变更',
  },
  {
    type: 'CUSTOM_STATUS_CHANGED',
    description: '自定义状态变更事件',
    example: '业务状态变更',
  },
]);

// 事件表格列定义
const eventColumns = [
  { title: '事件类型', dataIndex: 'type', key: 'type' },
  { title: '描述', dataIndex: 'description', key: 'description' },
  { title: '示例', dataIndex: 'example', key: 'example' },
];

// 方法
const handleClose = () => {
  emit('close');
};
</script>

<style lang="less" scoped>
.status-management-guide {
  .guide-content {
    display: flex;
    gap: 24px;
    max-height: 600px;
    overflow-y: auto;

    .guide-nav {
      width: 200px;
      flex-shrink: 0;
      border-right: 1px solid #f0f0f0;
      padding-right: 16px;
    }

    .guide-sections {
      flex: 1;
      padding-left: 16px;

      .guide-section {
        margin-bottom: 32px;

        h3 {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
          padding-bottom: 8px;
          margin-bottom: 16px;
        }

        h4 {
          color: #333;
          margin-bottom: 12px;
        }

        .status-card {
          .ant-card-head-title {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }

        .tip-box {
          background: #f6ffed;
          border: 1px solid #b7eb8f;
          border-radius: 6px;
          padding: 12px;
          margin-top: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
          color: #52c41a;
        }
      }
    }
  }
}
</style>
